<template>
    <div class='cart-item'>
        <div class="food-img">
            <img :src="data.img" alt="">
        </div>
        <div class="food-content">
            <h3>{{ data.name }}</h3>
            <p class="food-price">{{ data.price | currency }}</p>
            <div class="btns"> <button class="btn-minus" @click="changeNum(data.id, -1)"> - </button> {{ data.num }} <button
                    class="btn-add" @click="changeNum(data.id, 1, $event)"> + </button>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    name: '',
    props: ['data'],
    data() {
        return {

        }
    },
    filters: {
        currency(val) {
            return "￥" + val.toFixed(2)
        }
    },
    created() { },
    mounted() { },
    methods: {
        changeNum(id, num, e) {
            // 直接修改了prop
            this.$store.commit('setFoodNum', { id: id, n: num })

            // 如果点击的是加号，则播放小球动画
            if (num > 0 ) {
                this.$emit('add-to-cart', { x: e.clientX, y: e.clientY })
            }

        }
    }
}
</script>
<style scoped lang='scss'>
.cart-item {
    display: flex;
    // margin-top: 20px;
    box-sizing: border-box;
    padding: 12px;

    .food-img {
        width: 80px;
        height: 80px;

        img {
            width: 80px;
        }
    }

    .food-content {
        flex: 1;
        box-sizing: border-box;
        padding: 12px;

        .food-price {
            float: left;
            color: #f00;
            font-size: 18px;
        }
    }

    .btns {
        float: right;
        margin-right: 16px;

        button {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            font-size: 14px;
            line-height: 20px;
            border: none;
            outline: none;
        }

        .btn-minus {
            border: solid 1px #aaa;
        }

        .btn-add {
            color: #fff;
            background: linear-gradient(180deg, rgba(37, 136, 255, 1) 0%, rgba(122, 182, 255, 1) 100%);
        }
    }



}
</style>
